<template>
  <el-card class="buy">
    <div class="alert_box">
      <el-alert title="满5000包邮" type="info" show-icon></el-alert>
    </div>
    <div class="address_form">
      <el-form :inline="true" :model="addressForm" class="demo-form-inline">
        <el-form-item label="仓库">
          <el-select v-model="addressForm.storageId" size="mini">
            <el-option
              v-for="item in serVerStore"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="addressForm.expressName" size="mini" :disabled="true" placeholder></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="addressForm.expressTel" size="mini" :disabled="true" placeholder></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="hh-btnbox">
      <el-button size="mini" @click="handlePostOrder">提交订单</el-button>
    </div>

    <!-- 列表 -->
    <div class="table-box">
      <el-table
        ref="multipleTable"
        :data="tableData.list"
        :highlight-current-row="true"
        style="width: 100%"
        border
        size="mini"
        stripe
        @selection-change="m_handleSelectionChange"
      >
        <el-table-column align="center" width="55" type="selection" fixed="left"></el-table-column>
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          v-for="item in tableData.headList"
          :key="item.name"
          :label="item.title"
          :prop="item.name"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="item.name=='images'"></div>
            <div v-else-if="item.name=='buyNum'">
              <span class="rowSpan">{{scope.row.buyNum}}</span>
              <el-input class="rowInput" v-model="scope.row.buyNum" size="mini"></el-input>
            </div>
            <div v-else>{{scope.row[item.name]}}</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tableData.total>0"
        :total="tableData.total"
        :page.sync="searchForm.start"
        :limit.sync="searchForm.count"
        @pagination="m_getTableData"
      />
    </div>
    <!-- 弹框 -->
  </el-card>
</template>


<script>
import { axiosShoppingCartList, axiosCommitBuyOrder } from "@/api/shoppingCart";
import tablePage from "@/mixins/tablePage";
import goods from "./goods";
import pagination from "@/components/Pagination";
export default {
  name: "buy",
  mixins: [tablePage],
  components: {
    goods,
    pagination
  },
  data() {
    return {
      searchForm: {
        //搜索数据
        start: 1,
        count: 10
      },
      fn: axiosShoppingCartList,
      serVerStore: [
        {
          label: "南京仓",
          mane: "1"
        }
      ],
      addressForm: {},
      AEform: {},
      tableData: {
        //表格数据
        headList: [
          {
            name: "goodsName",
            title: "产品名称"
          },
          {
            name: "coding",
            title: "产品代码"
          },
          {
            name: "price",
            title: "产品价格"
          },
          {
            name: "stockNum",
            title: "产品库存"
          },
          {
            name: "buyNum",
            title: "购买数量"
          }
        ],
        list: [],
        total: 0
      },
      rows: {} //表行
    };
  },
  computed: {},
  created() {
    this.m_getTableData();
  },
  methods: {
    handlePostOrder() {
      let list = this.multipleSelection.map(item => {
        return {
          price:item.price,
          buyNum:item.buyNum,
        }
      });
      axiosCommitBuyOrder({
        list
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.buy {
  .current-row {
    .rowSpan {
      display: none;
    }
    .rowInput {
      display: block;
    }
  }
  .rowSpan {
    display: block;
    cursor: pointer;
  }
  .rowInput {
    display: none;
  }
}
</style>
